<template>
  <div class="">
    <form @submit.prevent="submit">
      <div>
        <label for="mobile">手机号</label>
        <input
          type="text"
          placeholder="请输入手机号码"
          maxlength="11"
          name="mobile"
          v-model="mobile"
          @input="yan"
        />
        <span v-show="show" class="red">请重新输入</span>
      </div>
      <div>
        <label for="code">密码：</label>
        <input
          type="password"
          placeholder="请输入密码"
          name="pass"
          v-model="pass"
          @input="yans"
        />
        <span v-show="flag" class="red">请重新输入</span>
      </div>
      <p>
        <input type="submit" value="登录" class="btn" :disabled="disabled" />
      </p>
    </form>
  </div>
</template>

<script>
const bile = /^1[3|5|6|7|8|9]\d{9}$/;
const pas = /[1-9A-Za-z]{6}\w$/;
export default {
  data() {
    return {
      mobile: "",
      pass: "",
      disabled: true,
      show: false,
      flag: false,
    };
  },
  mounted() {},
  methods: {
    yan() {
      if (!bile.test(this.mobile)) {
        this.show = true;
        return;
      }
      this.show = false;
    },
    yans() {
      if (!pas.test(this.pass)) {
        this.flag = true;
        return;
      }
      this.flag = false;
      if (this.flag == false && this.show == false) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    submit() {
      this.$router.push({ path: "/home" });
    },
  },
};
</script>

<style lang='scss' scoped>
input[disabled] {
  background-color: #ccc;
  color: #ccc;
}
.red {
  color: red;
}
</style>
